Day 7：Chrome Extension 實作篇 - background.js 背景腳本實作

🎯 系列目標：用 30 天時間，從零開始打造一個專屬輔大學生的課表生成 Chrome 擴充功能

👨‍💻 作者：輔大智慧資安 412580084

📅 Day 7：Chrome Extension 實作篇 - background.js 背景腳本實作

🛠️ 從理論到實作

昨天我們深入理解了 background.js 的理論基礎，今天我們要動手實作！我們將建立一個最簡單但功能正確的背景腳本，為我們的輔大課表生成器奠定基礎。

📋 實作目標

今天我們要完成：

1. 🏗️ 建立基本的 background.js 檔案
2. 🔧 設定 manifest.json 的背景腳本引用
3. 🧪 測試背景腳本基本載入

🏗️ 步驟 1：建立基本的 background.js

1.1 最簡單的 background.js

讓我們從最基本的版本開始：

// background.js - 輔大課表生成器背景腳本
console.log('🚀 輔大課表生成器背景腳本已載入');

// 擴充功能安裝時執行
chrome.runtime.onInstalled.addListener((details) => {
  console.log('📦 擴充功能安裝事件:', details.reason);
  
  if (details.reason === 'install') {
    console.log('✨ 歡迎使用輔大課表生成器！');
  } else if (details.reason === 'update') {
    console.log('🔄 擴充功能已更新');
  }
});

// Service Worker 啟動時執行
chrome.runtime.onStartup.addListener(() => {
  console.log('🚀 Service Worker 啟動');
});

1.2 Chrome API 語法簡介

讓我們了解一下上面代碼中使用的 Chrome API：

📋 chrome.runtime API

chrome.runtime.onInstalled：

// 語法格式
chrome.runtime.onInstalled.addListener((details) => {
  // details.reason 可能的值：
  // 'install' - 首次安裝
  // 'update' - 更新版本  
  // 'chrome_update' - Chrome 瀏覽器更新
  // 'shared_module_update' - 共享模組更新
});

chrome.runtime.onStartup：

// 語法格式
chrome.runtime.onStartup.addListener(() => {
  // 當 Chrome 啟動時執行
  // 注意：只有在 Chrome 啟動時才觸發，重新載入擴充功能不會觸發
});

🔍 事件監聽器的基本概念

在 Chrome Extension 中，大部分功能都是透過事件監聽器來實現：

// 基本格式
chrome.[API名稱].[事件名稱].addListener((參數) => {
  // 當事件發生時執行的代碼
});

常見的事件監聽器：

• chrome.runtime.onInstalled - 擴充功能安裝/更新時
• chrome.runtime.onStartup - Chrome 啟動時
• chrome.action.onClicked - 擴充功能圖示被點擊時（明天會學到）
• chrome.tabs.onUpdated - 分頁更新時（之後會學到）

⚠️ 重要注意事項

1. chrome 物件：

   • 只能在 Chrome Extension 環境中使用
   • 在一般網頁中無法使用
   • 需要在 manifest.json 中宣告相應權限

2. 異步處理：

   • 大部分 Chrome API 都是異步的
   • 使用 addListener 來監聽事件
   • 某些 API 支援 Promise（較新的 API）

3. 權限要求：

   • 不是所有 API 都需要特別權限
   • chrome.runtime 是基礎 API，通常不需要額外權限
   • 其他 API（如 chrome.storage）需要在 manifest.json 中宣告

🔧 步驟 2：更新 manifest.json

確保 manifest.json 有正確引用 background.js：

{
  "manifest_version": 3,
  "name": "輔大課表生成器",
  "version": "1.1.0",
  "description": "輔大課表生成器，一鍵產生當學期課表",
  "permissions": [
    "activeTab",
    "scripting",
    "storage",
    "downloads"
  ],
  "host_permissions": [
    "https://portal.fju.edu.tw/*",
    "http://estu.fju.edu.tw/*"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

🧪 步驟 3：測試背景腳本

3.1 載入並測試

1. 重新載入擴充功能：

   • 打開 chrome://extensions/
   • 點擊「重新載入」按鈕
     

2. 檢查背景腳本：

   • 點擊「檢查檢視畫面：service worker」
     

   • 查看 Console 輸出

3. 預期輸出：
   

📂 專案結構檢查

完成後，目前專案結構應該是：

📁 fju-schedule-extension/
├── 📄 manifest.json     ← 包含 background 設定
└── 📄 background.js     ← 新建立的背景腳本

🔗 知識銜接：今天我們建立了最基本的背景腳本架構，明天將加入事件處理機制，讓擴充功能能夠響應用戶操作和瀏覽器事件。

🎯 下集預告：Day 8 - Chrome Extension 理論篇 - 消息傳遞機制與 Popup 介面